<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table 模块快速使用</title>
  <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="/static/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuimini/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加主机 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除主机 </button>
            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="Console">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="Console" target="_blank">Console</a>
        </script>

        <script type="text/html" id="currentTableBar">
            <a class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</a>
        </script>

        <script type="text/html" id="SystemStatus">
            {% verbatim %}
                {{# if(d.system_status == 1){ }}
                物理机
                {{# } }}
                {{# if(d.system_status == 0){ }}
                虚拟机
                {{# } }}
            {% endverbatim %}
        </script>

        <script type="text/html" id="ScanStatus">
            {% verbatim %}
                {{# if(d.scan_status == 1){ }}
                连接正常
                {{# } }}
                {{# if(d.scan_status == 0){ }}
                连接异常
                {{# } }}
            {% endverbatim %}
        </script>



        <div id="django-webssh-terminal" class="hide">
            <div id="terminal"></div>
        </div>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script>
layui.use(['form', 'table','element'], function() {
    var table = layui.table,
        form = layui.form,
        $ = layui.jquery;
    //第一个实例
    table.render({
        elem: '#currentTableId'
        //,height: 312
        , url: '/resources/servers/api_json' //数据接口
        , toolbar: '#toolbarDemo'
        , defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }]
        ,cellMinWidth: 50
        , page: true //开启分页
        , cols: [[ //表头
            {type: "checkbox"}
            , {field: 'id', title: 'ID', width: 50, align: "center"}
            , {field: 'hostname', title: '主机名',width: 150,  align: "center"}
            , {field: 'ip_inner', title: '管理IP', width: 150, align: "center"}
            , {field: 'port', title: '端口',width: 80,  align: "center"}
            , {field: 'server_group', title: '资产组',width: 80, align: "center"}
            , {field: 'system_status', title: '机器类型',templet: '#SystemStatus', width: 100,  align: "center"}
            , {field: 'scan_status', title: '探测状态',templet: '#ScanStatus',width: 100,  align: "center"}
            , {field: 'cpu_count', title: '内核',width: 80,  align: "center"}
            , {field: 'cpu_info', title: 'CPU',minWidth:260, align: "center"}
            , {field: 'mem_info', title: '内存(M)',width: 150,  align: "center"}
            , {field: 'create_date', title: '创建时间',align: "center",width: 150,templet: '<div>{% verbatim %}{{layui.util.toDateString(d.showTime, "yyyy-MM-dd") }}{% endverbatim %}</div>'}
            , {field: 'classify', title: 'ssh连接', align: "center",width: 150, toolbar: '#Console'}
            , {field: 'classify', title: '操作', toolbar: '#currentTableBar',minWidth: 200, align: "center"}
        ]],
        limits: [10, 15, 20, 25, 50, 100],
        limit: 15,
        skin: 'even'
    })

    /**
     * toolbar事件监听
     */
    table.on('toolbar(currentTableFilter)', function (obj) {
        if (obj.event === 'add') {   // 监听添加操作
            $.ajax(
                {
                    url: '/resources/servers/add_server',
                    type: 'get',
                    success: function (data) {
                        //alert(res.os_list);
                        layer.open({
                            title: '添加主机',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/add.html',
                            //btn:['确认提交'],
                            success : function(layero, index) {
                                form.render();
                                var iframe = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);
                                //body.find('#hostname').val(data.os_list);
                                //body.find('#ip_inner').val(data.system_list);

                                //资产组
                                var content = '<option value="">请选择资产组</option>';
                                $.each(data.servergroups, function (index,item) {
                                    content += '<option value="' + item.pk + '">' + item.fields.name + '</option>';
                                });
                                body.find('#servergroup_id').html(content);

                                //资产用户
                                var content_user = '<option value="">请选择资产组</option>';
                                $.each(data.systemuser_list, function (index,item) {
                                    content_user += '<option value="' + item.pk + '">' + item.fields.name + '</option>';
                                });
                                body.find('#serveruser_id').html(content_user);

                                //操作系统
                                var content_os = '<option value="">请选择操作系统</option>';
                                $.each(data.os_list, function (index,item) {
                                    //alert(index);
                                    //alert(item);
                                    content_os += '<option value="' + item[0] + '">' + item[1] + '</option>';
                                });
                                body.find('#os_status').html(content_os);

                                //机器类型
                                var content_system = '<option value="">请选择机器类型</option>';
                                $.each(data.system_list, function (index,item) {
                                    content_system += '<option value="' + item[0] + '">' + item[1] + '</option>';
                                });
                                body.find('#system_status').html(content_system);

                                //解决select无法传值
                                iframe.layui.form.render('select');

                            },
                            //end: function() {
                            //    //window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                            //    return false;
                            //},
                            yes:function (index,layero) {
                                var newsForm = layer.getChildFrame('#userForm', index);
                                var dataForm = newsForm.serialize();
                                dataForm = decodeURIComponent(dataForm,true);//添加的表单数据
                                $.ajax({
                                    url: '/resources/servers/create/',
                                    type: 'POST',
                                    data: dataForm,
                                    success: function (res) {
                                        layer.alert(res.msg);
                                        //var index = parent.layer.getFrameIndex(window.name);
                                        //parent.layer.close(index);
                                        layer.close(index);
                                    }
                                })
                                //});

                            }
                        });
                }
             });

        } else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;

                ///
                layer.confirm('确定要删除吗', {
                    btn: ['确定', '取消'],
                    btn1: function () {
                        $.each(data, function (index, item) {
                            var id = item.id;
                            $.ajax({
                                url: '/resources/servers/delete/',
                                type: 'POST',
                                data: {"server_id": id},
                                success: function (res) {
                                    //layer.alert(res.msg);
                                    //layer.close(index);
                                    window.location.reload();
                                }
                            })
                        });
                    },
                    btn2: function () {
                        layer.close(layer.index);
                    }
                })


                ///
            }
    });
    // 监听编辑事件
    table.on('tool(currentTableFilter)', function (obj) {
        if (obj.event === 'edit') {   // 监听编辑操作
            var id = obj.data.id;
            $.ajax(
                {
                    url: '/resources/servers/edit',
                    type: 'get',
                    data: {"id":id},
                    success: function (data) {
                        layer.open({
                            title: '编辑用户',
                            type: 2, // 1:页面层 2: ifream层
                            shade: 0.2,
                            maxmin: false,
                            shadeClose: true,
                            area: ['90%', '80%'],
                            //offset: [openWH[2] + 'px', openWH[3] + 'px'],
                            content: '/static/layuimini/page/table/edit.html',
                            btn:['确认提交'],
                            success : function(layero, index) {
                                form.render();
                                var iframe = layero.find('iframe')[0].contentWindow;
                                var body = layer.getChildFrame('body', index);

                                //ID
                                body.find('#id').val(data.id);

                                //主机名
                                body.find('#hostname').val(data.hostname);
                                //IP
                                body.find('#ip_inner').val(data.ip_inner);

                                //资产组
                                var content = '<option value="">请选择资产组</option>';
                                $.each(data.servergroups, function (index,item) {
                                    if (data.servergroup.id === item.pk) {
                                        content += '<option value="' + item.pk + '" selected>' + item.fields.name + '</option>';
                                    }
                                    else{
                                        content += '<option value="' + item.pk + '">' + item.fields.name + '</option>';
                                    }
                                });
                                body.find('#servergroup_id').html(content);

                                //端口
                                body.find('#port').val(data.port);

                                //资产用户
                                var content_user = '<option value="">请选择资产用户</option>';
                                $.each(data.systemuser_list, function (index,item) {
                                    if (data.serveruser.id === item.pk) {
                                        content_user += '<option value="' + item.pk + '" selected>' + item.fields.name + '</option>';
                                    }
                                    else{
                                        content_user += '<option value="' + item.pk + '">' + item.fields.name + '</option>';
                                    }
                                });
                                body.find('#serveruser_id').html(content_user);

                                //操作系统
                                var content_os = '<option value="">请选择操作系统</option>';
                                $.each(data.os_list, function (index,item) {
                                    if (data.os_status === item[0]) {
                                        content_os += '<option value="' + item[0] + '" selected>' + item[1] + '</option>';
                                    }else{
                                       content_os += '<option value="' + item[0] + '">' + item[1] + '</option>';
                                    }
                                });
                                body.find('#os_status').html(content_os);

                                //机器类型
                                var content_system = '<option value="">请选择机器类型</option>';
                                $.each(data.system_list, function (index,item) {
                                    if (data.system_status === item[0]) {
                                        content_system += '<option value="' + item[0] + '" selected>' + item[1] + '</option>';
                                    }else{
                                        content_system += '<option value="' + item[0] + '">' + item[1] + '</option>';
                                    }
                                });
                                body.find('#system_status').html(content_system);

                                //解决select无法传值
                                iframe.layui.form.render('select');

                            },
                            end: function() {
                                window.location.reload();//写在这里的话不管是否提交成功都会刷新这个页面
                                return false;
                            },
                            yes:function (index,layero) {
                                var newsForm = layer.getChildFrame('#userForm', index);
                                var dataForm = newsForm.serialize();
                                dataForm = decodeURIComponent(dataForm,true);//添加的表单数据
                                $.ajax({
                                    url: '/resources/servers/edit/',
                                    type: 'POST',
                                    data: dataForm,
                                    success: function (res) {
                                        layer.alert(res.msg);
                                        //var index = parent.layer.getFrameIndex(window.name);
                                        //parent.layer.close(index);
                                        layer.close(index);
                                    }
                                })
                                //});

                            }
                        });
                }
             });

        } else if (obj.event === 'delete'){
            var id = obj.data.id;
            layer.confirm('确定要删除吗', {
                btn: ['确定', '取消'],
                btn1: function () {
                    $.ajax(
                        {
                            url: '/resources/servers/delete/',
                            type: 'POST',
                            data: {"server_id": id},
                            success: function (data) {
                                layer.close(layer.index);
                                window.location.reload();
                            }
                        }
                    )
                },
                btn2: function () {
                    layer.close(layer.index);
                }
            })
        }else if(obj.event === 'Console'){
            var id = obj.data.id;
            //window.location.href='"/devops/ssh_console/?id='+id+'"';
            var url = '/devops/ssh_console/?id='+id;
            let index =layer.open({
                type: 2,
                area: ['100%', '100%'], // 100%全屏
                shadeClose: true,
                shade: 0.4,
                title: '', // 标题留空让弹窗页头隐藏掉
                closeBtn: 0, // 不显示右上角那个X关闭按钮
                content: url, // 内容
                btn: ['退出']

            });
            layer.full(index);
        }

        ///
    });





});

</script>
</body>
</html>